<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米商城顶部导航栏</title>
  </head>
  <style>
    body {
      margin: 0;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    a {
      text-decoration: none;
    }
    .header {
      width: 100%;
      height: 60px;
      background-color: #fd6a88;
    }
    .menu {
      width: 1000px;
      margin: 0 auto;
      /* background-color: aquamarine; */
    }
    .menu ul li {
      /* height: 60px;
      line-height: 60px; */
      float: left;
      position: relative;
    }
    .menu ul li a:hover {
      background-color: #ee4d75;
    }
    .menu ul li a {
      display: block;
      height: 60px;
      line-height: 60px;
      padding: 0 30px;
      color: #fff;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
    .menu .submenu {
      width: 200px;
      position: absolute;
      top: 60px;
      left: 50%;
      margin-left: -100px;
      display: none;
    }
    .menu .submenu a {
      height: 40px;
      line-height: 40px;
      background-color: #fd6a88;
      font-size: 14px;
    }
    .menu .submenu a:hover {
      background-color: #ee4d75;
    }
    .menu ul li:hover .submenu {
      display: block;
    }
  </style>
  <body>
    <div class="header">
      <div class="menu">
        <ul class="clearfix">
          <li>
            <a href="">Xiaomi手机</a>
            <div class="submenu">
              <a href="">Xiaomi 13   </a>
              <a href="">Xiaomi 13 Pro </a>
              <a href="">Xiaomi Civi 2</a>
              <a href="">Xiaomi MIX Fold 2</a>
              <a href="">Xiaomi 12S Ultra</a>
            </div>
          </li>
          <li>
            <a href="">Redmi手机</a>
            <div class="submenu">
              <a href="">Xiaomi 13   </a>
              <a href="">Xiaomi 13 Pro </a>
              <a href="">Xiaomi Civi 2</a>
              <a href="">Xiaomi MIX Fold 2</a>
              <a href="">Xiaomi 12S Ultra</a>
            </div>
          </li>
          <li>
            <a href="">电视</a>
            <div class="submenu">
              <a href="">Xiaomi 13   </a>
              <a href="">Xiaomi 13 Pro </a>
              <a href="">Xiaomi Civi 2</a>
              <a href="">Xiaomi MIX Fold 2</a>
              <a href="">Xiaomi 12S Ultra</a>
            </div>
          </li>
          <li>
            <a href="">笔记本</a>
            <div class="submenu">
              <a href="">Xiaomi 13   </a>
              <a href="">Xiaomi 13 Pro </a>
              <a href="">Xiaomi Civi 2</a>
              <a href="">Xiaomi MIX Fold 2</a>
              <a href="">Xiaomi 12S Ultra</a>
            </div>
          </li>
          <li>
            <a href="">平板</a>
            <div class="submenu"></div>
          </li>
          <li>
            <a href="">家电</a>
            <div class="submenu">
              <a href="">Xiaomi 13   </a>
              <a href="">Xiaomi 13 Pro </a>
              <a href="">Xiaomi Civi 2</a>
              <a href="">Xiaomi MIX Fold 2</a>
              <a href="">Xiaomi 12S Ultra</a>
            </div>
          </li>
          <li>
            <a href="">路由器</a>
            <div class="submenu"></div>
          </li>
          <li>
            <a href="">服务中心</a>
            <!-- <div class="submenu"></div> -->
          </li>
          <li>
            <a href="">社区</a>
            <div class="submenu"></div>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
